<template>
  <div>
    <h1>{{ stuMessage }}</h1>
    <h2>学生姓名：{{ stuName }}</h2>
    <h2>学生年龄：{{ stuAge }}</h2>
    <h2>学生性别：{{ stuSex }}</h2>
    <button @click="updateStuAge">点击修改传入的age</button>
    <h3>修改后的年龄：{{ changeAge }}</h3>
  </div>
</template>

<script>
export default {
    name:"Student",
    data:function(){
        return{
            stuMessage:"student information",
            changeAge: this.stuAge //此时注意props是在data属性之前加载的，所以这里可以拿到stuAge的初始值
        }
    },
    // 方式1：指定属性接收外部传递给组件的数据
    //props:["stuName","stuAge","stuSex"]
    // 方式2：限制props中属性的类型 类型错误了会提示错误信息
    // props:{
    //     stuName:String,
    //     stuAge:Number,
    //     stuSex:String
    // }

    //方式3：接收时不仅限制类型还加上默认值的指定并指定它的必须性
    props:{
        stuName:{
            type:String,
            require:true  //必须输入
        },
        stuAge:{
            type:Number, 
            default: 99   //如果不输入指定默认值
        },
        stuSex:{
            type:String,
            require:true
        }
    },
    //一般对传入的数据不做修改，如果实在需要修改数据可以使用一个中间变量做中转接收
    methods:{
        updateStuAge(){
            this.changeAge++  
        }
    }


}
</script>


<style>

</style>